<template>
  <div class="messageRight" v-if="visible">
    <div class="message">
      <div class="messageTop">
        <span>{{ title }}</span>
        <i class="el-icon-close" @click="close"></i>
      </div>
      <div class="messageContent" v-html="msg"></div>
      <div class="messageButton" v-if="url">
        <el-button style="margin-right: 10px" type="primary" @click="toview(url)">查看</el-button>
        <el-button @click="close">{{closeTime}} 秒后关闭</el-button>
      </div>
    </div>
    <audio controls="controls" hidden muted="muted" ref="audioRef" src="@/assets/tip.mp3"></audio>
  </div>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user'; // 假设Pinia store路径
import { clickEvent } from "../../event/eventClick";
import { readNetwork, recordView } from "../../api/module/grbg/todoList";

// 接收props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  msg: {
    type: String,
    default: "default"
  },
  title: {
    type: String,
    default: "提示信息"
  },
  url: {
    type: String,
    default: ""
  },
  logUnid: {
    type: String,
    default: ""
  },
  event: {
    type: String,
    default: ""
  },
  gxjlunid: {
    type: String,
    default: ""
  }
});

// 定义响应式数据
const closeTime = ref(5);
const timgerId = ref(null);
const router = useRouter();
const userStore = useUserStore();

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    const audioRef = getCurrentInstance()?.refs.audioRef;
    if (audioRef) {
      audioRef.currentTime = 0;
      audioRef.play();
    }
    timgerId.value = setInterval(() => {
      closeTime.value--;
      if (closeTime.value <= 0) {
        close();
      }
    }, 1000);
  }
});

// 页面卸载时清除定时器
onUnmounted(() => {
  if (timgerId.value) {
    clearInterval(timgerId.value);
  }
});

// 查看方法
const toview = (url) => {
  if (props.event) {
    clickEvent(props.event, null, null);
  } else if (props.gxjlunid) {
    recordView({ gxjlunid: props.gxjlunid })
     .then(() => {
        console.log('查看记录');
      });
  }
  router.push(url);
  if (props.logUnid) {
    readNetwork({ unid: props.logUnid })
     .then(() => {
        userStore.SET_NETMESSAGENUM(userStore.totalNetMessageCount - 1);
      });
  }
  close();
};

// 关闭弹窗方法
const close = () => {
  if (timgerId.value && props.visible) {
    clearInterval(timgerId.value);
    // 这里不直接修改props.visible，如需控制可通过emit通知父组件
  }
};
</script>

<style lang="scss" scoped>
.message {
  position: fixed;
  right: 5px;
  bottom: 5px;
  z-index: 1999;
  width: 300px;
  background: #fff;
  box-shadow: 0 0 10px #dcdcdc;
  animation: show 1.5s;
 .messageTop {
    display: flex;
    justify-content: space-between;
    background: #ffb900;
  }
  div {
    padding: 10px;
  }
 .messageContent {
    text-indent: 2em;
  }
 .messageButton {
    display: flex;
    justify-content: center;
  }
  @keyframes show {
    0% {
      right: -300px;
    }
    100% {
      right: 5px;
    }
  }
}
</style>